/**
 * (一)添加内容
 */
// 1. 给input标签绑定keypress事件
var count = 1;

function addItem() {
    // 2. 获取按键的值
    var key = event.key;
    // 3. 判断key是否等Enter
    if (key === 'Enter') {
        //(1)获取输入框节点
        var $inp = document.querySelector('.inp');
        //(2)获取输入框的值
        var text = $inp.value
            //(3)创建li节点 
        var $li = document.createElement('li');
        //(4)把输入框的内容放入li节点
        $li.innerHTML = `<li class="item">
                            <span>${count++}.${text}</span>
                            <button>x</button>
                        </li>`;
        // 把li添加到ul里面
        var $list = document.querySelector('.list');
        $list.appendChild($li);
        // 清空输入框的数据
        $inp.value = '';
    }
}


/**
 * 删除清单
 */

// 1.在ul上绑定点击事件(使用事件冒泡机制,称之为事件托管或者事件委托)
function deleteItem() {
    // 2. 获取点击的节点
    var target = event.target;
    // 3. 判断点击的节点是不是button按钮, 如果是BUTTON,则执行下一步
    if (target.nodeName === 'BUTTON') {
        // 4. 通过button按钮找到它对应的li节点
        var $li = target.parentNode;
        $li.remove();
    };
}